<template>
  <view class="container" style="background-color: #f5f5f5">
    <z-paging-swiper>
      <view slot="top">
        <u-navbar title="我的发布" title-size="36" title-color="#333"></u-navbar>
        <view class="tabsView">
          <u-tabs-swiper
            ref="uTabs"
            :list="tabsList"
            :current="current"
            @change="tabsChange"
            :is-scroll="false"
            :show-bar="false"
            active-color="#0F76BC"
            swiper-width="750"
          >
          </u-tabs-swiper>
        </view>
        <u-gap height="20" bg-color="#F0F1F2"></u-gap>
      </view>
      <swiper
        class="swiperView"
        :current="scurrent"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <swiper-item v-for="(item2, index2) in tabsList" :key="index2" class="swiperItem">
          <z-paging
            ref="paging"
            v-model="itemList[index2]"
            @query="queryList"
            :fixed="true"
            :auto="false"
            :empty-view-img="`${getImageUrl('empty.png')} `"
            empty-view-text="暂无订单数据~"
            :empty-view-img-style="imgStyle"
          >
            <view class="goods_area">
              <view
                class="info_box"
                @click="routeTo(item)"
                v-for="(item, index) in itemList[index2]"
                :key="index"
              >
                <view class="" style="padding: 15rpx">
                  <view class="box-title">
                    <text v-if="item.status == 0" class="info_box-title-right">待支付</text>
                    <text v-else-if="item.status == 10" class="info_box-title-right flex-rig"
                      >报名中&nbsp;&nbsp;({{ item.enrollCount }}人参与）</text
                    >
                    <text v-else-if="item.status == 20" class="info_box-title-right flex-rig"
                      >选定中&nbsp;&nbsp;({{ item.enrollCount }}人参与）</text
                    >
                    <text v-else-if="item.status == 30" class="info_box-title-right">已选中</text>
                    <!-- <text  v-else-if="item.status == 40" class="info_box-title-right">已结单</text>	 -->
                    <!-- <text  v-else-if="item.status == 50" class="info_box-title-right">验收中</text> -->
                    <text v-else-if="item.status == 41" class="info_box-title-right">未合作</text>
                    <text v-else-if="item.status == 60" class="info_box-title-right">已磋商</text>
                    <text v-else-if="item.status == 70" class="info_box-title-right">已完成</text>
                    <text v-else-if="item.status == 71" class="info_box-title-right">未合作</text>
                  </view>
                  <view class="info_box-title">
                    {{ item.name }}
                  </view>
                  <!-- <view  v-if="item.status == 41"  class="rectification">
											延验收未通过原因：工程有诸多地方尚未完善,很多地方未整理干净
										</view> -->
                  <view class="info_box-desc-time">
                    <view class="info_box-desc"> 项目要求：{{ item.requireCondition }} </view>
                    <!-- <view class="info_box-desc">
												入场日期：{{formatTime(item.exceptStartTime)}}
											</view>	 -->
                    <view class="info_box-time">
                      项目预算：<text>¥{{ (item.budgetPrice * 0.01).toFixed(2) }}</text>
                      <!-- <text style="color:#999999">（保证金¥{{(item.depositPrice * 0.01).toFixed(2)}}）</text> -->
                    </view>
                  </view>

                  <view class="info-floor">
                    <text> 1小时前发布 </text>

                    <view class="info-floor-right">
                      <view
                        v-if="item.status == 0"
                        class="info-floor-btn"
                        style="background-color: #008ed6"
                        @click="routeTo"
                      >
                        立即支付
                      </view>
                      <!-- <view  v-else-if="item.status == 10" class="info-floor-btn" style="background-color: #008ED6;" @click.stop.prevent="onStop(e)">
													停止报名
												</view> -->
                      <!-- <view  v-else-if="item.status == 4" class="info-floor-btn" style="background-color: #008ED6;" @click="routeTo">
													立即接单
												</view> -->
                      <!-- <view class="" v-else-if="item.status == 30">
													<view  class="info-floor-btn" style="background-color: #008ED6;" @click.stop.prevent="pass(item)">
														开始合作
													</view>
													<view  class="info-floor-btn" style="background-color: #008ED6;" @click.stop.prevent="rebut(item)">
														拒绝合作
													</view>
												</view> -->
                      <view
                        @click.stop.prevent="onComment(item)"
                        v-else-if="item.status == 60"
                        class="info-floor-btn"
                        style="background-color: #008ed6"
                      >
                        立即评价
                      </view>
                    </view>
                  </view>
                </view>
                <u-gap height="20" bg-color="#F0F1F2"></u-gap>
              </view>
            </view>
          </z-paging>
        </swiper-item>
      </swiper>
    </z-paging-swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgStyle: {
        width: '12rem'
      },
      current: 0,
      scurrent: 0,
      tabsList: [
        {
          name: '全部',
          status: ''
        },
        // {
        // 	name: '待支付',
        // 	status: 0
        // },
        {
          name: '报名中',
          status: 10
        },
        {
          name: '选定中',
          status: 20
        },
        {
          name: '已选中',
          status: 30
        },
        // {
        // 	name: '建设中',
        // 	status:40
        // }, {
        // 	name: '验收中',
        // 	status: 50
        // },{
        // 	name: '整改中',
        // 	status: 41
        // }, {
        // 	name: '待评价',
        // 	status: 60
        // },
        {
          name: '已磋商',
          status: 40
        },
        {
          name: '已终止',
          status: 71
        }
      ],
      itemList: [[], [], [], [], [], []]
    }
  },
  computed: {
    formatTime() {
      return (e) => this.$utils.parseTime(e)
    }
  },
  onLoad(res) {},
  onShow() {
    this.queryList()
  },
  methods: {
    tabsChange(index) {
      this.scurrent = index
    },
    transition(e) {
      let dx = e.detail.dx
      this.$refs.uTabs.setDx(dx)
    },
    animationfinish(e) {
      this.current = e.detail.current
      this.scurrent = e.detail.current
      this.$refs.uTabs.setFinishCurrent(e.detail.current)
      if (this.itemList[this.current].length == 0) {
        this.queryList()
      }
    },
    queryList(pageNo = 1, pageSize = 10) {
      this.$u
        .get(
          `/app-api/construction/project-info/my-publish-page?pageNo=${pageNo}&pageSize=${pageSize}&status=${
            this.tabsList[this.current].status
          }`
        )
        .then((res) => [this.$refs.paging[this.current].complete(res.data.list)])
    },

    pass(e) {
      uni.dialog.confirm('温馨提示', '确定与施工队线下磋商成功(建议与施工队碰面磋商后确认)', () => {
        this.$u.put('/app-api/construction/project-info/approval-pass', {
          projectId: e.id
        })
      })
    },

    rebut(e) {
      uni.dialog.confirm('温馨提示', '是否取消合作', () => {
        this.$u.put('/app-api/construction/project-info/approval-refuse', {
          projectId: e.id
        })
      })
    },

    onComment(e) {
      uni.navigateTo({
        url: '/other/push-comment/push-comment?id=' + e.id
      })
    },
    onOrderCancel(item) {
      let self = this
      uni.dialog.confirm('温馨提示', '确定要取消订单吗？', () => {
        self.$u.api.setOrderCancel(item.id).then((res) => {
          self.$u.toast('取消成功')
          setTimeout(function () {
            self.onOrderLoad(self.current, null, true)
          }, 500)
        })
      })
    },
    onOrderPayment(item) {
      let self = this
      this.$utils.route({
        url: '/goods/payment/payment',
        params: {
          order_id: item.id,
          money: item.pay_price,
          total_weight: item.total_weight,
          delivery_price: item.delivery_price
        }
      })
    },
    onOrderConfrim(item) {
      let self = this
      uni.dialog.confirm('温馨提示', '该订单确认收货吗？', () => {
        self.$u.api.setOrderConfirm(item.id).then((res) => {
          self.$u.toast('收货成功')
          setTimeout(function () {
            self.onOrderLoad(self.current, null, true)
          }, 500)
        })
      })
    },
    onResellPush(item) {
      this.$utils.route({
        url: '/goods/resell-push/resell-push',
        params: {
          id: item.id
        }
      })
    },
    onPushComment(item) {
      this.$utils.route({
        url: '/other/push-comment/push-comment',
        params: {
          id: item.id
        }
      })
    },
    onOrderDetail(item) {
      // this.$utils.route({
      // 	url: '/pages/order-details/order-details',
      // 	params: {
      // 		id: item.id
      // 	}
      // });
    },
    routeTo(e) {
      uni.navigateTo({
        url: '/other/push-info/push-info?id=' + e.id
      })
    }
  }
}
</script>

<style scoped>
page {
  height: 100%;
  background: #f0f1f2;
}

.goods_area {
  padding: 20rpx;
}
.info_box {
  width: 710rpx;
  background-color: #ffffff;
}

.info_box-top {
  overflow: auto;
}

.rectification {
  padding: 10rpx 20rpx;
  background-color: #f5e1df;
  color: #f54831;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 30rpx;
}

.info_box-desc-time {
  margin-bottom: 20rpx;
  line-height: 43rpx;
  font-size: 32rpx;
}
.info_box-desc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.info_box-address {
  font-size: 27rpx;
  color: #666666;
}

.info-floor {
  margin: 25rpx 0;
  position: relative;
  font-size: 30rpx;
  color: #999999;
}

.info_box-top-left {
  position: relative;
  line-height: 46rpx;
}
.info-floor-right {
  position: absolute;
  top: 0;
  right: 2rpx;
}
.info-top-left-price {
  color: #f54831;
  margin-left: 10rpx;
}
.info-top-left-tip {
  display: inline-block;
  font-size: 23rpx;
  border: #0f76bc solid 1px;
  color: #0f76bc;
  padding: 0 5rpx;
}

.info_box-title {
  font-size: 38rpx;
  margin: 15rpx 0;
}
.box-title {
  display: flex;
  flex-direction: row-reverse;
}

.info_box-title-right {
  font-size: 32rpx;
  color: #f54831;
}
.info-floor-btn {
  display: inline-block;
  padding: 13rpx 20rpx;
  color: #ffffff;
  border-radius: 30rpx;
  margin: 0 8rpx;
}
</style>
